<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职业生涯经纪人 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/agents.css">
    <style>
        :root {
            --primary-color: #4e6ef2;
            --secondary-color: #5d7cf5;
            --accent-color: #ff5c5c;
            --dark-color: #333;
            --light-color: #f8f9fa;
            --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            --light-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        /* 全局样式优化 */
        .app-container {
            background-color: #f5f7fa;
        }
        
        /* 头部样式优化 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            height: 56px;
        }
        
        .page-title {
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        .search-btn {
            color: white;
            font-size: 20px;
        }
        
        /* 搜索栏 */
        .search-section {
            padding: 15px 20px;
            background-color: white;
            position: relative;
            box-shadow: var(--light-shadow);
        }
        
        .search-bar {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .search-input {
            flex: 1;
            padding: 12px 15px 12px 40px;
            border: 1px solid #e0e0e0;
            border-radius: 24px;
            font-size: 14px;
            background-color: #f5f7fa;
            transition: all 0.3s;
        }
        
        .search-input:focus {
            border-color: var(--primary-color);
            background-color: white;
            box-shadow: 0 0 0 3px rgba(78, 110, 242, 0.1);
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 15px;
            color: #999;
            font-size: 14px;
        }
        
        .filter-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .filter-btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        /* 服务介绍 */
        .intro-section {
            margin: 0 0 20px;
            padding: 0;
            background-color: white;
            overflow: hidden;
            box-shadow: var(--light-shadow);
        }
        
        .banner-container {
            position: relative;
            height: 180px;
            overflow: hidden;
        }
        
        .banner-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.7);
        }
        
        .banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 0 20px;
            background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
            color: white;
        }
        
        .banner-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        .banner-subtitle {
            font-size: 14px;
            margin-bottom: 15px;
            opacity: 0.9;
            max-width: 80%;
            line-height: 1.4;
        }
        
        .banner-btn {
            background-color: var(--accent-color);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .banner-btn:hover {
            background-color: #ff4444;
            transform: translateY(-2px);
        }
        
        .intro-stats {
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            border-top: 1px solid #f0f0f0;
        }
        
        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 10px;
        }
        
        .stat-value {
            font-size: 18px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 12px;
            color: #666;
        }
        
        /* 服务优势 */
        .features-section {
            padding: 15px 20px;
            margin-bottom: 20px;
            background-color: white;
            box-shadow: var(--light-shadow);
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark-color);
            position: relative;
            padding-left: 12px;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 3px;
            height: 16px;
            width: 4px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .feature-card {
            background-color: #f8f9fc;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            height: 130px;
        }
        
        .feature-card.expanded {
            height: auto;
            padding-bottom: 20px;
            z-index: 2;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            background-color: white;
        }
        
        .feature-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .feature-card.expanded:hover {
            transform: none;
        }
        
        .feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: rgba(78, 110, 242, 0.1);
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 10px;
            transition: all 0.3s;
        }
        
        .feature-card.expanded .feature-icon {
            background-color: var(--primary-color);
            color: white;
            transform: scale(1.1);
        }
        
        .feature-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--dark-color);
            margin-bottom: 5px;
        }
        
        .feature-card.expanded .feature-title {
            color: var(--primary-color);
        }
        
        .feature-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
        }
        
        .feature-detail {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
            width: 100%;
            text-align: left;
            margin-top: 0;
            opacity: 0;
        }
        
        .feature-card.expanded .feature-detail {
            max-height: 200px;
            margin-top: 15px;
            opacity: 1;
            transition: max-height 0.5s ease, opacity 0.3s ease 0.2s;
        }
        
        .feature-detail ul {
            padding-left: 20px;
            margin: 0;
        }
        
        .feature-detail li {
            font-size: 12px;
            color: #555;
            margin-bottom: 6px;
            position: relative;
        }
        
        .feature-detail li::before {
            content: "✓";
            color: var(--primary-color);
            position: absolute;
            left: -15px;
            font-weight: bold;
        }
        
        .feature-card::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: 5px;
            right: 5px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ccc' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.5;
            transition: all 0.3s;
        }
        
        .feature-card.expanded::after {
            transform: rotate(180deg);
            opacity: 1;
        }
        
        /* 推荐经纪人 */
        .recommend-section {
            background-color: white;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: var(--light-shadow);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .see-all {
            font-size: 13px;
            color: #999;
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        
        .see-all i {
            font-size: 12px;
            margin-left: 2px;
        }
        
        .agents-slider {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding: 5px 0;
            scrollbar-width: none;  /* Firefox */
            -ms-overflow-style: none;  /* IE and Edge */
        }
        
        .agents-slider::-webkit-scrollbar {
            display: none;  /* Chrome, Safari, Opera */
        }
        
        .agent-slide {
            flex: 0 0 auto;
            width: 140px;
        }
        
        .agent-card-sm {
            background-color: #f9f9fc;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
        }
        
        .agent-card-sm:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            position: relative;
        }
        
        .agent-avatar {
            width: 100%;
            height: 140px;
            object-fit: cover;
        }
        
        .agent-badge {
            position: absolute;
            bottom: -10px;
            right: 10px;
            width: 22px;
            height: 22px;
            background-color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
            color: white;
            font-size: 10px;
        }
        
        .card-body {
            padding: 12px 10px 5px;
        }
        
        .agent-name {
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 3px;
            color: #333;
        }
        
        .agent-title {
            font-size: 12px;
            color: #666;
            margin: 0 0 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .agent-rating {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #ffb24a;
        }
        
        .agent-rating span {
            margin-left: 3px;
            color: #666;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px 12px;
        }
        
        .agent-price {
            font-size: 12px;
            color: var(--accent-color);
            font-weight: 500;
        }
        
        .book-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 4px 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .book-btn:hover {
            background-color: var(--secondary-color);
        }
        
        /* 新增：经纪人等级 Tab 样式 */
        .agent-tabs {
            display: flex;
            background-color: white;
            padding: 10px 20px 0; /* 调整 padding，移除底部 padding */
            box-shadow: var(--light-shadow);
            border-top-left-radius: 12px; /* 添加圆角 */
            border-top-right-radius: 12px; /* 添加圆角 */
        }

        .agent-tabs .tab {
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            color: #666;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            margin-bottom: -1px; /* 盖住 agents-group 的上边框 */
            position: relative;
        }

        .agent-tabs .tab.active {
            color: var(--primary-color);
            font-weight: 600;
            border-bottom-color: var(--primary-color);
        }

        .agent-tab-content {
            display: none; /* 默认隐藏内容 */
            background-color: white; /* 确保背景色 */
            padding: 15px 20px; /* 保持内边距 */
            box-shadow: var(--light-shadow); /* 保持阴影 */
            border-bottom-left-radius: 12px; /* 添加圆角 */
            border-bottom-right-radius: 12px; /* 添加圆角 */
            border-top: 1px solid #f0f0f0; /* 添加上边框 */
        }
        
        .agent-tab-content.active {
            display: block; /* 显示活动内容 */
        }
        /* --- 结束新增样式 --- */

        /* 经纪人列表 */
        .agents-list {
            margin-bottom: 20px;
        }
        
        .agents-group {
            margin-bottom: 0; /* 移除外边距 */
            /* background-color: white; */ /* 移除背景色，由父级控制 */
            /* padding: 15px 20px; */ /* 移除 padding，由父级控制 */
            /* box-shadow: var(--light-shadow); */ /* 移除阴影，由父级控制 */
        }
        
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 20px;
        }
        
        .agent-card {
            background-color: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s;
        }
        
        .agent-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        
        .card-top {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .card-img {
            position: relative;
            width: 80px;
            height: 80px;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .card-img img {
            width: 100%;
            height: 100%;
            border-radius: 12px;
            object-fit: cover;
        }
        
        .tag {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #9da8b3;
            color: white;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 10px;
            z-index: 1;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .tag.elite {
            background-color: var(--accent-color);
        }
        
        .card-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .name-rating {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .name-rating h3 {
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            color: var(--dark-color);
        }
        
        .rating {
            display: flex;
            align-items: center;
        }
        
        .rate-num {
            font-size: 14px;
            font-weight: 600;
            color: #ffb24a;
            margin-right: 5px;
        }
        
        .stars {
            color: #ffb24a;
            font-size: 12px;
        }
        
        .title {
            font-size: 13px;
            color: #666;
            margin: 0 0 8px;
        }
        
        .specialties {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .specialty {
            background-color: #f0f5ff;
            color: var(--primary-color);
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 10px;
        }
        
        .card-content {
            padding: 15px;
        }
        
        .description {
            font-size: 13px;
            line-height: 1.5;
            color: #555;
            margin: 0 0 15px;
        }
        
        .achievements {
            display: flex;
            margin-bottom: 15px;
            background-color: #f8f9fc;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .achievement {
            flex: 1;
            text-align: center;
            padding: 10px 5px;
            border-right: 1px solid #eee;
        }
        
        .achievement:last-child {
            border-right: none;
        }
        
        .achievement .number {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 2px;
        }
        
        .achievement .text {
            font-size: 11px;
            color: #666;
        }
        
        .service-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .service-card {
            background-color: #f9f9fc;
            border-radius: 10px;
            padding: 8px;
            text-align: center;
            transition: all 0.3s;
        }
        
        .service-card:hover {
            background-color: #f0f5ff;
            transform: translateY(-2px);
        }
        
        .service-card h4 {
            margin: 0 0 3px;
            font-size: 12px;
            color: #555;
            font-weight: 500;
        }
        
        .service-card .price {
            margin: 0;
            font-size: 14px;
            color: var(--accent-color);
            font-weight: 600;
        }
        
        .card-btns {
            display: flex;
            gap: 10px;
        }
        
        .detail-btn, .consult-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
        }
        
        .detail-btn {
            background-color: #f0f5ff;
            color: var(--primary-color);
        }
        
        .detail-btn:hover {
            background-color: #e0ebff;
        }
        
        .consult-btn {
            background-color: var(--primary-color);
            color: white;
        }
        
        .consult-btn:hover {
            background-color: var(--secondary-color);
        }
        
        .load-more {
            display: flex;
            justify-content: center;
            padding: 10px;
        }
        
        .load-more-btn {
            background-color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: var(--light-shadow);
            transition: all 0.3s;
        }
        
        .load-more-btn:hover {
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* 成功案例 */
        .success-cases {
            background-color: white;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: var(--light-shadow);
        }
        
        .success-cases h2 {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark-color);
            position: relative;
            padding-left: 12px;
        }
        
        .success-cases h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 3px;
            height: 16px;
            width: 4px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        .case-slider {
            position: relative;
        }
        
        .case-item {
            background-color: #f8f9fc;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 12px;
            object-fit: cover;
        }
        
        .user-details h3 {
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 4px;
            color: #333;
        }
        
        .user-details p {
            font-size: 12px;
            margin: 0;
            color: #666;
        }
        
        .case-content {
            font-size: 13px;
            line-height: 1.6;
            color: #555;
            margin-bottom: 15px;
            font-style: italic;
        }
        
        .results {
            display: flex;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .result-item {
            flex: 1;
            padding: 10px;
            text-align: center;
            border-right: 1px solid #f0f0f0;
        }
        
        .result-item:last-child {
            border-right: none;
        }
        
        .result-item h4 {
            font-size: 12px;
            margin: 0 0 4px;
            color: #666;
            font-weight: 500;
        }
        
        .result-item p {
            font-size: 13px;
            margin: 0;
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .case-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .case-prev, .case-next {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: white;
            border: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .case-prev:hover, .case-next:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .case-dots {
            display: flex;
            gap: 5px;
        }
        
        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ddd;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .dot.active {
            background-color: var(--primary-color);
            transform: scale(1.2);
        }
        
        /* 底部导航栏 */
        .tab-bar {
            background-color: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            padding: 8px 0;
            flex: 1;
            cursor: pointer;
        }
        
        .tab-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }
        
        .tab-item span {
            font-size: 12px;
        }
        
        .tab-item.active {
            color: var(--primary-color);
        }
        
        /* 视频弹窗 */
        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            animation: fadeIn 0.3s ease;
        }
        
        .video-modal.active {
            display: flex;
        }
        
        .modal-content {
            width: 90%;
            max-width: 800px;
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }
        
        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            background-color: #000;
        }
        
        .video-container iframe, 
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .modal-close {
            position: absolute;
            top: -40px;
            right: 10px;
            color: white;
            background-color: transparent;
            border: none;
            font-size: 24px;
            cursor: pointer;
            z-index: 1001;
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .video-title {
            color: white;
            font-size: 16px;
            margin: 15px 0;
            max-width: 90%;
            text-align: center;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <a href="../index.html" class="back-btn"><i class="bi bi-arrow-left"></i></a>
            <h1 class="page-title">职业生涯经纪人</h1>
            <div class="search-btn"><i class="bi bi-search"></i></div>
        </header>

        <!-- 搜索栏 -->
        <section class="search-section">
            <div class="search-bar">
                <i class="bi bi-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索经纪人姓名、行业或技能">
                <button class="filter-btn">
                    <i class="bi bi-funnel"></i>
                </button>
            </div>
        </section>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 服务介绍 -->
            <section class="intro-section">
                <div class="banner-container">
                    <img src="https://images.pexels.com/photos/7876708/pexels-photo-7876708.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="职业经纪人服务" class="banner-img">
                    <div class="banner-overlay">
                        <h2 class="banner-title">遇见职场引路人</h2>
                        <p class="banner-subtitle">500+行业精英助你规划职业路径，提升竞争力</p>
                        <button class="banner-btn">
                            <i class="bi bi-play-circle"></i>
                            观看服务介绍
                        </button>
                    </div>
                </div>
                <div class="intro-stats">
                    <div class="stat-item">
                        <div class="stat-value">500+</div>
                        <div class="stat-label">认证经纪人</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">98%</div>
                        <div class="stat-label">学员好评率</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">35%</div>
                        <div class="stat-label">平均薪资涨幅</div>
                    </div>
                </div>
            </section>

            <!-- 服务优势 -->
            <section class="features-section">
                <h2 class="section-title">我们的优势</h2>
                <div class="features-grid">
                    <div class="feature-card" data-feature="elite">
                        <div class="feature-icon">
                            <i class="bi bi-person-check"></i>
                        </div>
                        <h3 class="feature-title">严选行业精英</h3>
                        <p class="feature-desc">所有经纪人均经过严格筛选与培训，平均8年+行业经验</p>
                        <div class="feature-detail">
                            <ul>
                                <li>行业背景审核，确保真实从业经历</li>
                                <li>专业测评认证，考核知识技能水平</li>
                                <li>授课能力培训，提升辅导教学效果</li>
                                <li>定期业绩评估，淘汰低质量顾问</li>
                            </ul>
                        </div>
                    </div>
                    <div class="feature-card" data-feature="plan">
                        <div class="feature-icon">
                            <i class="bi bi-clipboard-data"></i>
                        </div>
                        <h3 class="feature-title">科学职业规划</h3>
                        <p class="feature-desc">基于职业气质测评和大数据分析，制定个性化发展方案</p>
                        <div class="feature-detail">
                            <ul>
                                <li>MBTI职业倾向测试，匹配最适合岗位</li>
                                <li>行业趋势分析，把握市场热点机会</li>
                                <li>能力差距诊断，明确提升方向</li>
                                <li>阶段性目标设定，循序渐进成长</li>
                            </ul>
                        </div>
                    </div>
                    <div class="feature-card" data-feature="coaching">
                        <div class="feature-icon">
                            <i class="bi bi-lightning-charge"></i>
                        </div>
                        <h3 class="feature-title">高效求职辅导</h3>
                        <p class="feature-desc">涵盖简历指导、面试训练、Offer谈判等全流程服务</p>
                        <div class="feature-detail">
                            <ul>
                                <li>简历一对一点评，HR视角深度优化</li>
                                <li>模拟面试演练，针对性提升表达</li>
                                <li>真实面试题库，掌握行业考察重点</li>
                                <li>薪资谈判策略，争取最优待遇方案</li>
                            </ul>
                        </div>
                    </div>
                    <div class="feature-card" data-feature="guarantee">
                        <div class="feature-icon">
                            <i class="bi bi-shield-check"></i>
                        </div>
                        <h3 class="feature-title">服务质量保障</h3>
                        <p class="feature-desc">不满意全额退款，专属客服7*24小时在线支持</p>
                        <div class="feature-detail">
                            <ul>
                                <li>服务标准透明，明确每个环节交付内容</li>
                                <li>不满意退款承诺，消费者权益保障</li>
                                <li>专属管家跟进，及时解决服务问题</li>
                                <li>会员权益升级，长期陪伴职业发展</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 推荐经纪人 -->
            <section class="recommend-section">
                <div class="section-header">
                    <h2 class="section-title">推荐经纪人</h2>
                    <a href="recommend-agents.html" class="see-all">查看全部 <i class="bi bi-chevron-right"></i></a>
                </div>
                <div class="agents-slider">
                    <div class="agent-slide">
                        <div class="agent-card-sm">
                            <div class="card-header">
                                <img src="https://images.pexels.com/photos/3760263/pexels-photo-3760263.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="张明" class="agent-avatar">
                                <div class="agent-badge">
                                    <i class="bi bi-patch-check-fill"></i>
                                </div>
                            </div>
                            <div class="card-body">
                                <h3 class="agent-name">张明</h3>
                                <p class="agent-title">前BAT高级HR</p>
                                <div class="agent-rating">
                                    <i class="bi bi-star-fill"></i>
                                    <span>4.9</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span class="agent-price">¥299起</span>
                                <button class="book-btn">预约</button>
                            </div>
                        </div>
                    </div>
                    <div class="agent-slide">
                        <div class="agent-card-sm">
                            <div class="card-header">
                                <img src="https://images.pexels.com/photos/5393594/pexels-photo-5393594.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="王静" class="agent-avatar">
                                <div class="agent-badge">
                                    <i class="bi bi-patch-check-fill"></i>
                                </div>
                            </div>
                            <div class="card-body">
                                <h3 class="agent-name">王静</h3>
                                <p class="agent-title">资深金融顾问</p>
                                <div class="agent-rating">
                                    <i class="bi bi-star-fill"></i>
                                    <span>5.0</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span class="agent-price">¥399起</span>
                                <button class="book-btn">预约</button>
                            </div>
                        </div>
                    </div>
                    <div class="agent-slide">
                        <div class="agent-card-sm">
                            <div class="card-header">
                                <img src="https://images.pexels.com/photos/3785104/pexels-photo-3785104.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="李华" class="agent-avatar">
                                <div class="agent-badge">
                                    <i class="bi bi-patch-check-fill"></i>
                                </div>
                            </div>
                            <div class="card-body">
                                <h3 class="agent-name">李华</h3>
                                <p class="agent-title">金融行业导师</p>
                                <div class="agent-rating">
                                    <i class="bi bi-star-fill"></i>
                                    <span>4.8</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span class="agent-price">¥199起</span>
                                <button class="book-btn">预约</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 经纪人列表 -->
            <section class="agents-list">
                <!-- 新增 Tab 导航 -->
                <div class="agent-tabs">
                    <div class="tab active" data-target="gold-agents">金牌经纪人</div>
                    <div class="tab" data-target="silver-agents">银牌经纪人</div>
                </div>

                <!-- 金牌经纪人 -->
                <div id="gold-agents" class="agents-group agent-tab-content active">
                    <!-- 移除 H2 标题 -->
                    <div class="card-container">
                        <div class="agent-card">
                            <div class="card-top">
                                <div class="card-img">
                                    <img src="https://images.pexels.com/photos/3760263/pexels-photo-3760263.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="张明">
                                    <span class="tag elite">金牌</span>
                                </div>
                                <div class="card-info">
                                    <div class="name-rating">
                                        <h3>张明</h3>
                                        <div class="rating">
                                            <span class="rate-num">4.9</span>
                                            <div class="stars">
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-half"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="title">前BAT高级HR</p>
                                    <div class="specialties">
                                        <span class="specialty">简历优化</span>
                                        <span class="specialty">面试辅导</span>
                                        <span class="specialty">互联网行业</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-content">
                                <p class="description">8年互联网HR经验，曾在BAT担任招聘负责人，擅长简历优化和面试指导，帮助200+学生成功入职一线互联网公司。</p>
                                <div class="achievements">
                                    <div class="achievement">
                                        <span class="number">200+</span>
                                        <span class="text">学员</span>
                                    </div>
                                    <div class="achievement">
                                        <span class="number">98%</span>
                                        <span class="text">好评率</span>
                                    </div>
                                    <div class="achievement">
                                        <span class="number">30%</span>
                                        <span class="text">平均提薪</span>
                                    </div>
                                </div>
                                <div class="service-cards">
                                    <div class="service-card">
                                        <h4>简历优化</h4>
                                        <p class="price">¥299</p>
                                    </div>
                                    <div class="service-card">
                                        <h4>面试辅导</h4>
                                        <p class="price">¥499</p>
                                    </div>
                                    <div class="service-card">
                                        <h4>全程跟踪</h4>
                                        <p class="price">¥1999</p>
                                    </div>
                                </div>
                                <div class="card-btns">
                                    <button class="detail-btn">查看详情</button>
                                    <button class="consult-btn">立即预约</button>
                                </div>
                            </div>
                        </div>
                        <div class="agent-card">
                            <div class="card-top">
                                <div class="card-img">
                                    <img src="https://images.pexels.com/photos/5393594/pexels-photo-5393594.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="王静">
                                    <span class="tag elite">金牌</span>
                                </div>
                                <div class="card-info">
                                    <div class="name-rating">
                                        <h3>王静</h3>
                                        <div class="rating">
                                            <span class="rate-num">5.0</span>
                                            <div class="stars">
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="title">资深金融顾问</p>
                                    <div class="specialties">
                                        <span class="specialty">职业规划</span>
                                        <span class="specialty">投行求职</span>
                                        <span class="specialty">金融行业</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-content">
                                <p class="description">毕业于哈佛商学院，曾在高盛工作10年，擅长投行求职指导和职业规划，帮助150+学生成功入职国内外顶级金融机构。</p>
                                <div class="achievements">
                                    <div class="achievement">
                                        <span class="number">150+</span>
                                        <span class="text">学员</span>
                                    </div>
                                    <div class="achievement">
                                        <span class="number">100%</span>
                                        <span class="text">好评率</span>
                                    </div>
                                    <div class="achievement">
                                        <span class="number">45%</span>
                                        <span class="text">平均提薪</span>
                                    </div>
                                </div>
                                <div class="service-cards">
                                    <div class="service-card">
                                        <h4>求职规划</h4>
                                        <p class="price">¥399</p>
                                    </div>
                                    <div class="service-card">
                                        <h4>案例分析</h4>
                                        <p class="price">¥599</p>
                                    </div>
                                    <div class="service-card">
                                        <h4>全程辅导</h4>
                                        <p class="price">¥2999</p>
                                    </div>
                                </div>
                                <div class="card-btns">
                                    <button class="detail-btn">查看详情</button>
                                    <button class="consult-btn">立即预约</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 银牌经纪人 -->
                <div id="silver-agents" class="agents-group agent-tab-content">
                    <!-- 移除 H2 标题 -->
                    <div class="card-container">
                        <div class="agent-card">
                            <div class="card-top">
                                <div class="card-img">
                                    <img src="https://images.pexels.com/photos/3785104/pexels-photo-3785104.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="李华">
                                    <span class="tag">银牌</span>
                                </div>
                                <div class="card-info">
                                    <div class="name-rating">
                                        <h3>李华</h3>
                                        <div class="rating">
                                            <span class="rate-num">4.8</span>
                                            <div class="stars">
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="title">金融行业职业导师</p>
                                    <div class="specialties">
                                        <span class="specialty">职业规划</span>
                                        <span class="specialty">求职策略</span>
                                        <span class="specialty">金融行业</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-content">
                                <p class="description">曾在四大会计师事务所工作6年，现任某大型券商高管，擅长金融行业求职指导和职业发展规划。</p>
                                <div class="achievements">
                                    <div class="achievement">
                                        <span class="number">120+</span>
                                        <span class="text">学员</span>
                                    </div>
                                    <div class="achievement">
                                        <span class="number">95%</span>
                                        <span class="text">好评率</span>
                                    </div>
                                    <div class="achievement">
                                        <span class="number">25%</span>
                                        <span class="text">平均提薪</span>
                                    </div>
                                </div>
                                <div class="service-cards">
                                    <div class="service-card">
                                        <h4>职业规划</h4>
                                        <p class="price">¥199</p>
                                    </div>
                                    <div class="service-card">
                                        <h4>简历优化</h4>
                                        <p class="price">¥299</p>
                                    </div>
                                    <div class="service-card">
                                        <h4>求职辅导</h4>
                                        <p class="price">¥1599</p>
                                    </div>
                                </div>
                                <div class="card-btns">
                                    <button class="detail-btn">查看详情</button>
                                    <button class="consult-btn">立即预约</button>
                                </div>
                            </div>
                        </div>
                        <div class="agent-card">
                            <div class="card-top">
                                <div class="card-img">
                                    <img src="https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="陈进">
                                    <span class="tag">银牌</span>
                                </div>
                                <div class="card-info">
                                    <div class="name-rating">
                                        <h3>陈进</h3>
                                        <div class="rating">
                                            <span class="rate-num">4.7</span>
                                            <div class="stars">
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-half"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="title">互联网产品经理</p>
                                    <div class="specialties">
                                        <span class="specialty">产品经理</span>
                                        <span class="specialty">项目实践</span>
                                        <span class="specialty">互联网行业</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card-content">
                                <p class="description">5年互联网产品经验，曾在头条、美团担任产品经理，熟悉互联网产品求职流程和技能要求，提供实战项目指导。</p>
                                <div class="achievements">
                                    <div class="achievement">
                                        <span class="number">90+</span>
                                        <span class="text">学员</span>
                                    </div>
                                    <div class="achievement">
                                        <span class="number">94%</span>
                                        <span class="text">好评率</span>
                                    </div>
                                    <div class="achievement">
                                        <span class="number">20%</span>
                                        <span class="text">平均提薪</span>
                                    </div>
                                </div>
                                <div class="service-cards">
                                    <div class="service-card">
                                        <h4>求职咨询</h4>
                                        <p class="price">¥199</p>
                                    </div>
                                    <div class="service-card">
                                        <h4>项目指导</h4>
                                        <p class="price">¥499</p>
                                    </div>
                                    <div class="service-card">
                                        <h4>面试辅导</h4>
                                        <p class="price">¥1299</p>
                                    </div>
                                </div>
                                <div class="card-btns">
                                    <button class="detail-btn">查看详情</button>
                                    <button class="consult-btn">立即预约</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多 -->
                <div class="load-more">
                    <a href="recommend-agents.html" class="load-more-btn">
                        查看更多经纪人
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </section>

            <!-- 成功案例 -->
            <section class="success-cases">
                <h2 class="section-title">成功案例</h2>
                <div class="case-slider">
                    <div class="case-item">
                        <div class="user-info">
                            <img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="用户头像" class="user-avatar">
                            <div class="user-details">
                                <h3>小王 | 计算机专业</h3>
                                <p>从普通二本到BAT</p>
                            </div>
                        </div>
                        <p class="case-content">
                            "通过张明老师6个月的指导，我从一个普通二本院校的学生成功拿到了字节跳动的offer，薪资比我预期高出40%！整个过程中，老师不仅帮我优化了简历，还针对我的情况制定了详细的学习计划和项目实践方案，让我在面试中脱颖而出。"
                        </p>
                        <div class="results">
                            <div class="result-item">
                                <h4>提升结果</h4>
                                <p>成功入职字节跳动</p>
                            </div>
                            <div class="result-item">
                                <h4>薪资涨幅</h4>
                                <p>+40%</p>
                            </div>
                        </div>
                    </div>
                    <div class="case-item" style="display: none;">
                        <div class="user-info">
                            <img src="https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="用户头像" class="user-avatar">
                            <div class="user-details">
                                <h3>小李 | 金融专业</h3>
                                <p>从普通券商到投行</p>
                            </div>
                        </div>
                        <p class="case-content">
                            "王静老师的指导让我在竞争激烈的金融行业脱颖而出。她帮我梳理了职业规划，提供了专业领域的深度辅导，最终让我成功从一家普通券商跳槽到了高盛，年薪涨幅超过50%。她对金融行业的深刻理解和人脉资源对我帮助很大。"
                        </p>
                        <div class="results">
                            <div class="result-item">
                                <h4>提升结果</h4>
                                <p>入职高盛投行</p>
                            </div>
                            <div class="result-item">
                                <h4>薪资涨幅</h4>
                                <p>+50%</p>
                            </div>
                        </div>
                    </div>
                    <div class="case-item" style="display: none;">
                        <div class="user-info">
                            <img src="https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="用户头像" class="user-avatar">
                            <div class="user-details">
                                <h3>小张 | 市场营销</h3>
                                <p>从传统企业到互联网</p>
                            </div>
                        </div>
                        <p class="case-content">
                            "作为非技术背景转行互联网，我一开始非常迷茫。陈进老师帮我分析了我的优势，指导我如何将传统行业经验转化为互联网公司需要的能力，并协助完成了几个实战项目。最终我成功进入阿里，薪资提升了35%。"
                        </p>
                        <div class="results">
                            <div class="result-item">
                                <h4>提升结果</h4>
                                <p>成功转行互联网</p>
                            </div>
                            <div class="result-item">
                                <h4>薪资涨幅</h4>
                                <p>+35%</p>
                            </div>
                        </div>
                    </div>
                    <div class="case-controls">
                        <button class="case-prev"><i class="bi bi-arrow-left"></i></button>
                        <div class="case-dots">
                            <span class="dot active" data-index="0"></span>
                            <span class="dot" data-index="1"></span>
                            <span class="dot" data-index="2"></span>
                        </div>
                        <button class="case-next"><i class="bi bi-arrow-right"></i></button>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <div class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="bi bi-compass"></i>
                <span>发现</span>
            </div>
            <div class="tab-item active">
                <i class="bi bi-person-badge-fill"></i>
                <span>经纪人</span>
            </div>
            <div class="tab-item">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </div>
        </footer>
    </div>

    <!-- 视频弹窗 -->
    <div class="video-modal" id="videoModal">
        <div class="video-title">职业经纪人服务介绍</div>
        <div class="modal-content">
            <button class="modal-close" id="closeVideo"><i class="bi bi-x"></i></button>
            <div class="video-container">
                <video id="introVideo" controls poster="https://images.pexels.com/photos/7876708/pexels-photo-7876708.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
                    <source src="https://mazwai.com/videvo_files/video/free/2016-11/small_watermarked/Aloha_Spirit-Joris_Marengo_TravelerOnTheRoad.com_preview.webm" type="video/webm">
                    <source src="https://cdn.videvo.net/videvo_files/video/free/2019-01/small_watermarked/181015_13_Venice%20Beach%20Drone_25_preview.mp4" type="video/mp4">
                    您的浏览器不支持视频播放，请升级您的浏览器。
                </video>
            </div>
        </div>
    </div>

    <script src="../js/main.js"></script>
    <script src="../videos/agent-intro.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 行业筛选
            const industryItems = document.querySelectorAll('.industry-item');
            industryItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有活跃状态
                    industryItems.forEach(i => i.classList.remove('active'));
                    // 添加当前活跃状态
                    this.classList.add('active');
                    
                    // 这里可以添加筛选经纪人列表的逻辑
                    const industry = this.querySelector('span').textContent;
                    console.log(`筛选行业：${industry}`);
                    
                    // 模拟筛选效果
                    showToast(`已筛选 ${industry} 行业经纪人`);
                });
            });
            
            // 案例轮播
            const caseItems = document.querySelectorAll('.case-item');
            const caseDots = document.querySelectorAll('.case-dots .dot');
            const prevBtn = document.querySelector('.case-prev');
            const nextBtn = document.querySelector('.case-next');
            let currentIndex = 0;
            
            function showCase(index) {
                // 隐藏所有案例
                caseItems.forEach(item => item.style.display = 'none');
                // 移除所有点的活跃状态
                caseDots.forEach(dot => dot.classList.remove('active'));
                
                // 显示当前索引的案例
                caseItems[index].style.display = 'block';
                caseDots[index].classList.add('active');
                currentIndex = index;
            }
            
            // 点击圆点切换案例
            caseDots.forEach(dot => {
                dot.addEventListener('click', function() {
                    const index = parseInt(this.getAttribute('data-index'));
                    showCase(index);
                });
            });
            
            // 点击前后按钮切换案例
            prevBtn.addEventListener('click', function() {
                let index = currentIndex - 1;
                if (index < 0) index = caseItems.length - 1;
                showCase(index);
            });
            
            nextBtn.addEventListener('click', function() {
                let index = currentIndex + 1;
                if (index >= caseItems.length) index = 0;
                showCase(index);
            });
            
            // 自动轮播
            let slideInterval = setInterval(() => {
                let index = currentIndex + 1;
                if (index >= caseItems.length) index = 0;
                showCase(index);
            }, 5000);
            
            // 鼠标悬停时暂停轮播
            const caseSlider = document.querySelector('.case-slider');
            caseSlider.addEventListener('mouseenter', () => {
                clearInterval(slideInterval);
            });
            
            caseSlider.addEventListener('mouseleave', () => {
                slideInterval = setInterval(() => {
                    let index = currentIndex + 1;
                    if (index >= caseItems.length) index = 0;
                    showCase(index);
                }, 5000);
            });
            
            // 推荐经纪人点击
            const agentCardsSm = document.querySelectorAll('.agent-card-sm');
            agentCardsSm.forEach(card => {
                card.addEventListener('click', function() {
                    const name = this.querySelector('.agent-name').textContent;
                    // 这里可以跳转到经纪人详情页
                    console.log(`查看经纪人：${name}`);
                    // 模拟跳转
                    showToast(`即将查看 ${name} 的详细资料`);
                });
            });
            
            // 预约咨询按钮点击
            const consultBtns = document.querySelectorAll('.consult-btn');
            consultBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation(); // 阻止冒泡，避免触发卡片点击
                    const card = this.closest('.agent-card');
                    const name = card.querySelector('h3').textContent;
                    console.log(`预约咨询：${name}`);
                    
                    // 模拟预约弹窗
                    showToast(`已发送预约请求给 ${name}，请等待回复`);
                });
            });
            
            // 查看详情按钮点击
            const detailBtns = document.querySelectorAll('.detail-btn');
            detailBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation(); // 阻止冒泡，避免触发卡片点击
                    const card = this.closest('.agent-card');
                    const name = card.querySelector('h3').textContent;
                    // 这里可以跳转到经纪人详情页
                    console.log(`查看详情：${name}`);
                    
                    // 模拟跳转
                    showToast(`即将查看 ${name} 的详细资料`);
                });
            });
            
            // 加载更多按钮点击
            const loadMoreBtn = document.querySelector('.load-more-btn');
            if(loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function() {
                    this.innerHTML = '<i class="bi bi-arrow-repeat" style="animation: spin 1s linear infinite;"></i> 加载中...';
                    this.disabled = true;
                    
                    // 模拟加载延迟
                    setTimeout(() => {
                        this.innerHTML = '没有更多经纪人了';
                        showToast('已加载全部经纪人');
                    }, 1500);
                });
            }
            
            // 搜索功能
            const searchInput = document.querySelector('.search-input');
            const filterBtn = document.querySelector('.filter-btn');
            
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    const query = this.value.trim();
                    if (query) {
                        console.log(`搜索：${query}`);
                        showToast(`搜索 "${query}" 的结果`);
                    }
                }
            });
            
            filterBtn.addEventListener('click', function() {
                // 这里可以弹出筛选面板
                showToast('打开筛选选项');
            });
            
            // 视频播放功能
            const bannerBtn = document.querySelector('.banner-btn');
            const videoModal = document.getElementById('videoModal');
            const closeVideo = document.getElementById('closeVideo');
            const introVideo = document.getElementById('introVideo');
            
            bannerBtn.addEventListener('click', function() {
                // 显示视频弹窗
                videoModal.classList.add('active');
                
                // 尝试自动播放视频，在某些浏览器中可能不生效
                try {
                    introVideo.play().catch(error => {
                        console.log('自动播放被阻止:', error);
                        // 显示提示用户点击播放按钮的消息
                        showToast('点击视频区域播放介绍视频');
                    });
                } catch (error) {
                    console.log('视频播放出错:', error);
                }
                
                // 防止滚动
                document.body.style.overflow = 'hidden';
            });
            
            closeVideo.addEventListener('click', function() {
                // 关闭视频弹窗
                videoModal.classList.remove('active');
                
                // 暂停视频
                introVideo.pause();
                
                // 恢复滚动
                document.body.style.overflow = '';
            });
            
            // 点击视频弹窗背景区域关闭弹窗
            videoModal.addEventListener('click', function(e) {
                // 仅当点击事件发生在弹窗背景上时关闭
                if (e.target === videoModal) {
                    videoModal.classList.remove('active');
                    introVideo.pause();
                    document.body.style.overflow = '';
                }
            });
            
            // 显示Toast消息
            function showToast(message) {
                // 如果已有Toast，则先移除
                const existingToast = document.querySelector('.toast-message');
                if (existingToast) {
                    existingToast.remove();
                }
                
                // 创建Toast元素
                const toast = document.createElement('div');
                toast.className = 'toast-message';
                toast.textContent = message;
                toast.style.position = 'fixed';
                toast.style.bottom = '80px';
                toast.style.left = '50%';
                toast.style.transform = 'translateX(-50%) translateY(20px)';
                toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
                toast.style.color = 'white';
                toast.style.padding = '10px 20px';
                toast.style.borderRadius = '20px';
                toast.style.fontSize = '14px';
                toast.style.opacity = '0';
                toast.style.transition = 'all 0.3s ease';
                toast.style.zIndex = '1000';
                
                document.body.appendChild(toast);
                
                // 显示Toast
                setTimeout(() => {
                    toast.style.opacity = '1';
                    toast.style.transform = 'translateX(-50%) translateY(0)';
                }, 10);
                
                // 自动消失
                setTimeout(() => {
                    toast.style.opacity = '0';
                    toast.style.transform = 'translateX(-50%) translateY(20px)';
                    setTimeout(() => {
                        toast.remove();
                    }, 300);
                }, 2500);
            }
            
            // 服务特点展开详情
            const featureCards = document.querySelectorAll('.feature-card');
            featureCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 如果已经是展开状态，则收起
                    if (this.classList.contains('expanded')) {
                        this.classList.remove('expanded');
                        return;
                    }
                    
                    // 先收起所有卡片
                    featureCards.forEach(c => c.classList.remove('expanded'));
                    
                    // 展开当前卡片
                    this.classList.add('expanded');
                    
                    // 根据特性类型展示不同的详情内容
                    const featureType = this.getAttribute('data-feature');
                    console.log(`查看特性: ${featureType}`);
                });
            });
            
            // 初始化
            showCase(0); // 显示第一个案例
            
            // 新增：经纪人等级 Tab 切换逻辑
            const agentTabs = document.querySelectorAll('.agent-tabs .tab');
            const agentContents = document.querySelectorAll('.agent-tab-content');

            agentTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');

                    // 移除所有 Tab 的 active 类
                    agentTabs.forEach(t => t.classList.remove('active'));
                    // 为当前点击的 Tab 添加 active 类
                    this.classList.add('active');

                    // 隐藏所有内容区域
                    agentContents.forEach(content => content.classList.remove('active'));
                    // 显示目标内容区域
                    const targetContent = document.getElementById(targetId);
                    if (targetContent) {
                        targetContent.classList.add('active');
                    }
                });
            });
            // --- 结束新增逻辑 ---
        });
    </script>
    <script src="../js/agents.js"></script>
    <script src="../js/nav.js"></script>
</body>
</html> 